<template>
     <div>
        <div ref="editorElem" style="text-align: left;"></div>
     </div>
</template>

<script>
 import E from "wangeditor";
 import { ROAST_CONFIG } from '@/config.js';
 import { uploadImage } from '@/api/upload.js';
 export default {
   name: "Editor",
   data() {
     return {
       editor: null,
       editorContent: '',
     };
   },
   // catchData是一个类似回调函数，来自父组件，当然也可以自己写一个函数，主要是用来获取富文本编辑器中的html内容用来传递给服务端
   props: ['catchData','child_content'], // 接收父组件的方法,content表示内容
   watch:{
     child_content(val){
        this.editor.txt.html(this.child_content);
     }
   },
   mounted() {
     let that=this;
     this.editor = new E(this.$refs.editorElem);
     // 编辑器的事件，每次改变会获取其html内容
     this.editor.config.onchange = html => {
       this.editorContent = html;
       this.catchData(this.editorContent);  //把这个html通过catchData的方法传入父组件
     };
     this.editor.config.uploadImgServer = ROAST_CONFIG.API_URL+'/editorupload';
     //后台接收的文件参数
     this.editor.config.uploadFileName = "editor_file";
     this.editor.config.uploadVideoServer = ROAST_CONFIG.API_URL+'/videoupload';
     this.editor.config.uploadVideoName = 'editor_video';
      // 隐藏“网络图片”tab
     //this.editor.config.showLinkImg = false
    // 将图片大小限制为 3M
    this.editor.config.uploadImgMaxSize = 3 * 1024 * 1024;
    this.editor.languageType = [
            'Bash',
            'C',
            'C#',
            'C++',
            'CSS',
            'Java',
            'JavaScript',
            'JSON',
            'TypeScript',
            'Plain text',
            'Html',
            'XML',
            'SQL',
            'Go',
            'Kotlin',
            'Lua',
            'Markdown',
            'PHP',
            'Python',
            'Shell Session',
            'Ruby',
    ];
    this.editor.config.languageTab = '    ';
    //配置字体
    this.editor.config.fontNames = [
        {name:"黑体",value:"黑体"},
        {name:"绝绝字体",value:"Times New Roman"},
        '黑体',
        '仿宋',
        '楷体',
        '标楷体',
        '华文仿宋',
        '华文楷体',
        '宋体',
        '微软雅黑',
        'Arial',
        'Tahoma',
        'Verdana',
        'Times New Roman',
        'Courier New',
    ];
    this.editor.config.debug = true;
    this.editor.config.pasteTextHandle = function (content) {
            // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
            let body_index=content.indexOf('<body');
            let new_content=content.substring(body_index);
            return new_content;
    }
    //是否设置cookie
    this.editor.config.withCredentials = false;
    //图片上传hooks
    this.editor.config.customUploadImg = function (files, insert) {
      let fd=new FormData();
      for(var index in files){
          fd.append('file[]',files[index]);
          fd.append('api_token',that.$store.getters.getSessionId);
      }
      uploadImage(fd).then(function(response){
          if(response.data.code==1){
            for(var i in response.data.urls){
               insert(response.data.urls[i]);
            }
          }else{
             that.$message({
                 message:'图片上传失败',
                 type:'error',
                 duration:1000
             });
          }
      }).catch(function(res){
          that.$message({
              message:'服务器通信失败',
              type:'error',
              duration:1000
          });
      })
    },
    //增加上传参数
    this.editor.config.uploadVideoParams={
       'api_token':that.$store.getters.getSessionId
    },
    //20211220添加，视频上传回调
    this.editor.config.uploadVideoHooks={
       success:function(xhr){
          console.log('success');
       },
       fail:function(xhr,editor,resData){
          console.log('fail');
       }
    },

    this.editor.config.menus = [
       // 菜单配置
       'head', // 标题
       'bold', // 粗体
       'fontSize', // 字号
       'fontName', // 字体
       'italic', // 斜体
       'underline', // 下划线
       'strikeThrough', // 删除线
       'indent',  //缩进
       'lineHeight',
       'foreColor', // 文字颜色
       'backColor', // 背景颜色
       'link', // 插入链接
       'list', // 列表
       'justify', // 对齐方式
       'quote', // 引用
       'emoticon',
       'image', // 插入图片
       'video',  // 插入视频
       'table', // 表格
       'code',  //代码块
       'splitLine',
       'undo', // 撤销
       'redo' // 重复
     ];
     this.editor.create(); // 创建富文本实例
  }
}
</script>
<style>


.w-e-menu {
    z-index: 2 !important;
  }
  .w-e-text-container {
    z-index: 1 !important;
  }
</style>
